<template>
    <div class="label-select">
        <slot></slot>
        <div class="label-style">{{labelName}}</div>
        <div class="select-style">
            <a-input v-model:value="refInputValue" :placeholder="placeholder"
                :style="'width:' + inputWidth +'vw;'" @change="handleChange"
                :disabled="isdisabled" allow-clear/>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'LabelInput'
}
</script>
<script lang="ts" setup>
import { computed, ref, toRaw, getCurrentInstance, watch } from 'vue';

const { proxy, ctx } = getCurrentInstance() as any;

let props = defineProps({
    labelName: String,
    inputValue: String,
    placeholder: String,
    inputWidth: Number,
    isdisabled: Boolean,
})

let refInputValue = ref(props.inputValue);

const emits = defineEmits(['update:inputValue'])

const handleChange = (e: any) => {
  emits('update:inputValue', refInputValue.value)
}
</script>
<style lang="less" scoped>
.label-select {
    height: 32px; // 默认输入框高度为32px
    display: flex;
    align-items: center;

    .select-style {
        margin-left: 10px;
    }

    :deep(.ant-select-selector) {
        text-align: left;
    }
}
</style>